<template>
  <div class="box">
    <header>
      <span @click="$router.push('/ask')"
        ><van-icon name="arrow-left" style="font-size: 60px; color: white" />
        <span style="font-size: 60px; color: white; margin-left: 25%; line-height: 150px"
          >妙手医生网络诊室</span
        >
        <span
          ><van-icon name="replay" style="font-size: 60px; color: white; margin-left: 25%"
        /></span>
      </span>
      <div class="object">
        <div class="center">
          <div class="left">
            <img
              :src="detail.avatar"
              alt=""
              style="width: 200px; height: 200px; border-radius: 50%"
            />
          </div>

          <div class="right">
            <p class="first">
              <b>{{ detail.name }}</b
              ><button class="btn">+关注</button>
            </p>
            <p>{{ detail.position }}&nbsp;&nbsp;{{ detail.class }}</p>
            <p>{{ detail.address }}&nbsp;{{ detail.hospital }}</p>
          </div>
        </div>

        <div class="flex">
          <div class="top">
            <b>{{ detail.browse }}</b>
            <b>100%</b>
            <b>{{ detail.person }}分钟</b>
            <b>{{ detail.fans }}</b>
          </div>

          <div class="bottom">
            <li>浏览人数</li>
            <li>好评率</li>
            <li>平均响应</li>
            <li>粉丝数</li>
          </div>
          <br />
          <p style="padding: 0 68px">
            <b>擅长</b>:&emsp;{{ detail.brief }}。<span style="color: #9eb5df">查看简介</span>
          </p>
        </div>
      </div>
    </header>

    <main>
      <div class="serve">
        <h3>医生服务</h3>
        <div class="first">
          <div class="first-box">
            <img src="../../img/8f07c908de53012baaa31c2c3badbe49.jpg" alt="" @click="qbz" />
            <b>在线咨询</b>
            <span>1对1问医生</span>
          </div>

          <div class="first-box">
            <img src="../../img/881f916a04cea04d07d25dd3e67f0220.jpg" alt="" />
            <b>复诊开方</b>
            <span>未开通</span>
          </div>

          <div class="first-box">
            <img src="../../img/25308a9ac1b231a0bb675f46f6b4e02e.jpg" alt="" />
            <b>优选药房</b>
            <span>未开通</span>
          </div>

          <div class="first-box">
            <img src="../../img/b87881a95d04dcb4ca35b05109404e71.jpg" alt="" />
            <b>门诊预约</b>
            <span>预约线下就诊</span>
          </div>
        </div>

        <div v-show="showflag" class="second">
          <li class="three">
            <h3>选择咨询类型</h3>
            <button @click="showflag = false">X</button>
          </li>

          <div class="centers">
            <div class="leftt">
              <img src="../../img/11.png" alt="" style="width: 120px;margin: 0 90px;">
            </div>
            <div class="rightt">
              <p class="rights"><b>图文咨询</b><span class="span">￥35/次</span></p><br>
              <p>和医生发文字、图片聊天</p><br>
              <p class="rightly">服务时长:20条消息,有效期:24小时<button @click="$router.push('/login')">立即咨询</button></p>
              <img src="../../img/11.png" alt="" style="width: 120px" />
            </div>
            <div class="rightt">
              <p class="rights">
                <b>图文咨询</b><span style="color: orangered; font-size: 40px">￥35/次</span>
              </p>
              <br />
              <p>和医生发文字、图片聊天</p>
              <br />
              <p class="rightly">服务时长:20条消息,有效期:24小时<button>咨询</button></p>
            </div>
          </div>
        </div>
      </div>

      <div class="evaluate">
        <div>
          <p>
          <h3>评价</h3>
          <span>(43)</span>
          <span class="max">查看更多&nbsp;></span>
          </p>
        </div>

        <!-- 评价  -->
        <div class="second">

          <div>
            <ul v-for="(item, index) in comment" :key="index">
              <li v-if="index === 0" style="margin: 0 60px;">{{ item.city }}{{ item.pub }}**评价了图文咨询
                <span style="margin: 0 130px;">
                  <van-rate v-model="value" :size="25" color="orangered" void-icon="star" void-color="#eee" />
                </span>
              </li>
            </ul>
          </div>


          <div class="tens" style="padding: 30px 50px;">
            <button style="width: 200px;height: 70px;border-radius: 50px;border: none;margin: 0 5px;">回答很及时</button>
            <button style="width: 250px;height: 70px;border-radius: 50px;border: none;margin: 0 5px;">讲解细致耐心</button>
            <button style="width: 200px;height: 70px;border-radius: 50px;border: none;margin: 0 5px;">态度很好</button>
            <button style="width: 200px;height: 70px;border-radius: 50px;border: none;margin: 0 5px;">回答很专业</button>
          </div>

          <div>

            <ul v-for="(item, index) in comment" :key="index">
              <b>
                <li v-if="index === 0" style="margin: 0 60px;"> {{ item.content }}</li>
              </b>
              <li v-if="index === 0" style="margin: 30px 60px;color: #ccc;">2024/12/19&emsp;{{ item.time }}</li>
            </ul>
            <hr>
          </div>

        </div>
        <div class="second">

          <div>
            <ul v-for="(item, index) in comment" :key="index">
              <li v-if="index === 1" style="margin: 20px 45px;">{{ item.city }}{{ item.pub }}**评价了图文咨询
                <span style="margin: 0 130px;">
                  <van-rate v-model="value" :size="25" color="orangered" void-icon="star" void-color="#eee" />
                </span>
              </li>
            </ul>
          </div>


          <div class="tens" style="padding: 30px 50px;">
            <button style="width: 200px;height: 70px;border-radius: 50px;border: none;margin: 0 5px;">回答很及时</button>
            <button style="width: 250px;height: 70px;border-radius: 50px;border: none;margin: 0 5px;">讲解细致耐心</button>
            <button style="width: 200px;height: 70px;border-radius: 50px;border: none;margin: 0 5px;">态度很好</button>
            <button style="width: 200px;height: 70px;border-radius: 50px;border: none;margin: 0 5px;">回答很专业</button>
          </div>

          <div>

            <ul v-for="(item, index) in comment" :key="index">
              <b>
                <li v-if="index === 1" style="margin: 0 60px;"> {{ item.content }}</li>
              </b>
              <li v-if="index === 1" style="margin: 30px 60px;color: #ccc;">2024/12/19&emsp;{{ item.time }}</li>
            </ul>
            <hr>
          </div>

        </div>

        <h3>评价</h3>
      </div>
    </main>

    <footer>
      <div>
        <button @click="qbz">发消息</button>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { compact } from 'lodash';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const detail = ref([])
const comment = ref([])
const route = useRoute()
const showflag = ref(false)
const falg = ref(false)
const value = ref(5);

const qbz = () => {
  showflag.value = !showflag.value
  console.log(falg.value)
}
onMounted(() => {
  setTimeout(() => {
    showflag.value = false
  }, 5000)
})

const getDetail = async (id: number) => {
  const res = await axios.get(`/api/doctorList?id=${id}`).then((res) => {
    console.log(res)
    detail.value = res.data.data
  })
}
getDetail(route.query.id)

const getComment = async () => {
  await axios.get('/api/comment').then(res => {
    console.log(res)
    comment.value = res.data.data
  })
}
getComment()

</script>



<style>
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;

  header {
    height: 100%;
    background-image: linear-gradient(#376df6 10%, #faf6f6 20%);

    .object {
      width: 90%;
      height: 390px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 15px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      opacity: 0.8;

      .center {
        width: 100%;
        display: flex;

        .left {
          width: 20%;
          padding: 0.3125rem;
          /* background-color: green; */
        }

        .right {
          flex: 1;
          /* background-color: gray; */

          p {
            margin: 20px;
            margin-left: 50px;
            font-size: 25px;
          }
        }

        .first {
          display: flex;
          justify-content: space-between;

          .btn {
            width: 100px;
            height: 40px;
            border-radius: 50px;
            background-color: #ffefe4;
            color: orangered;
            border: none;
          }
        }
      }

      .flex {
        .top {
          display: flex;

          b {
            width: 400px;
            text-align: center;
            font-weight: 600;
            font-size: 26px;
          }
        }

        .bottom {
          display: flex;

          li {
            width: 400px;
            text-align: center;
            margin: 10px 0;
          }
        }
      }
    }
  }

  main {
    flex: 1;
    height: 100%;
    overflow-y: scroll;

    .serve {
      width: 90%;
      height: 300px;
      position: absolute;
      background-color: #fff;
      top: 38%;
      left: 5%;
      border-radius: 10px;

      h3 {
        padding: 30px 20px;
      }

      .first {
        width: 100%;
        height: 60px;
        margin: 50px 0;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .first-box {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 100px;
            height: 100px;
            margin: 25px;
          }

          div {
            text-align: center;
          }

          span {
            font-size: 20px;
            color: #9e9ea0;
            font-weight: normal;
            margin: 10px 0px;
          }
        }
      }

      .second {
        position: absolute;
        width: 111%;
        height: 738px;
        top: 30%;
        left: -6%;
        margin: 0 auto;
        background-color: #fff;
        z-index: 1;

        .three {
          display: flex;
          justify-content: space-between;
          align-items: center;

          button {
            width: 100px;
            border: none;
            background-color: #fff;
            font-size: 34px;
            color: #ccc;
          }
        }

        .centers {
          display: flex;

          .leftt {
            width: 20%;
            margin: 30px 50px;
          }

          .rightt {
            flex: 1;

            .rights {
              margin: 10px 5px;
              display: flex;
              justify-content: space-between;

              .span {
                color: orangered;
                font-size: 26px;
                margin: 0 20px;
              }
            }

            .rightly {
              display: flex;
              justify-content: space-between;

              span {
                margin: 0 50px;
              }

              button {
                width: 100px;
                height: 50px;
                background-color: #1e6fff;
                color: #fff;
                border-radius: 15px;
                margin: -20px 15px;
              }
            }

            p:nth-child(1) {
              margin: 5px 5px;
            }
          }
        }
      }
    }

    .evaluate {
      width: 90%;
      height: 380px;
      position: absolute;
      background-color: #fff;
      top: 62.5%;
      overflow-y: scroll;
      left: 5%;
      border-radius: 10px;

      h3 {
        padding: 20px 20px;
      }

      p {
        display: flex;

        span {
          margin: 28px -10px;
        }

        .max {
          margin-top: 27px;
          margin-left: 400px;
          color: #9eb5df;
        }

      }
    }
  }

  footer {
    height: 100px;
    background-color: #fff;

    div {
      button {
        width: 90%;
        height: 80px;
        background-color: #1e6fff;
        margin-left: 37px;
        border: none;
        border-radius: 20px;
        font-size: 24px;
        color: #fff;
      }
    }
  }
}
</style>
